<template>
  <div class="alarm-notification">
    <div class="header">
      <h2 style="  font-size: 20px;">告警通知 <span class="priority">重要</span></h2>

      <div class="close-btn">×</div>
    </div>
    <div class="detail">
      <div>告警编号：2025092867551923800866628</div>
      <div>发现时间：2025/09/28 10:29:30</div>
    </div>
    <div class="content">
      <div class="left-panel">
        <h3>流程进度</h3>
        <div class="timeline">
          <div class="timeline-item active">
            <div class="circle"></div>
            <div class="step">
              <h4>发现告警</h4>
              <p>温度传感器：红外告警</p>
              <p>发现时间：2025/09/28 10:29:30</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="circle"></div>
            <div class="step">
              <h4>派发维修</h4>
              <p>操作者：xxx</p>
              <p>责任人：xxx</p>
              <p>时间：2025/09/28 10:29:30</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="circle"></div>
            <div class="step">
              <h4>修复中</h4>
              <p>责任人：xxx</p>
              <p>时间：2025/09/28 10:29:30</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="circle"></div>
            <div class="step">
              <h4>告警确认已解除</h4>
              <p>责任人：xxx</p>
              <p>时间：2025/09/28 10:29:30</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="circle"></div>
            <div class="step">
              <h4>申请告警清除</h4>
              <p>操作者：xxx</p>
              <p>时间：2025/09/28 10:29:30</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="circle"></div>
            <div class="step">
              <h4>告警清除审核</h4>
              <p>操作者：xxx</p>
              <p>时间：2025/09/28 10:29:30</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="circle"></div>
            <div class="step">
              <h4>告警清除</h4>
              <p>审核人：xxx</p>
              <p>时间：2025/09/28 10:29:30</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right-panel">
        <h3>环境告警</h3>
        <p>告警类型-服务器告警</p>
        <h3>故障设备</h3>
        <p>编号：844475825，硬盘故障</p>
        <h3>故障设备位置</h3>
        <p>机房1-服务器矩阵1-机柜1-1-单元1-1-1（8盘位故障）</p>
        <h3>处理方案</h3>
        <p>需要更换硬盘（需要佩戴记录仪进行记录或拍照、视频，记录维修过程）</p>
        <h3>负责部门</h3>
        <div class="form-group">
          <select style="height: 35px">
            <option>请选择部门</option>
          </select>
          <select style="height: 35px">
            <option>请选择人员</option>
          </select>
          <button>派发工单</button>
        </div>
      </div>
    </div>
    <div class="footer">
      <button class="confirm-btn">确认</button>
    </div>
  </div>
</template>

<script setup>
// 这里可以添加组件的逻辑
</script>

<style scoped>
.alarm-notification {
  width: 100%;
  background-color: #f5f7fa;
  font-family: Arial, sans-serif;
}

.header {

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 15px 0 15px;
}

.priority {
  background-color: #f95d6a;
  color: white;
  padding: 7px 23px;
  border-radius: 9px;
  font-size: 14px;
}

.close-btn {
  cursor: pointer;
  font-size: 24px;
}

.detail {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  color: #666;
  font-size: 14px;
}

.content {
  display: flex;
  padding: 20px;
}

.left-panel {
  text-align: left;
  /* height: 500px; */
  width: 35%;
  padding-right: 20px;
}

.right-panel {
  text-align: left;
  width: 65%;
}

h3 {
  margin-top: 20px;
  padding-left: 8px;
  border-left: 3px solid #4a6baf;
  font-size: 16px;
  color: #333;
}

p {
  margin: 10px 0;
  color: #555;
}

.timeline {
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 2px;
  background-color: #e0e0e0;
}

.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 5px;
}

.timeline-item.active .circle {
  background-color: #3498db;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e0e0e0;
  position: absolute;
  left: 0;
  top: 0;
}

.step h4 {
  font-size: 12px;
  margin-bottom: 8px;
  color: #333;
}

.step p {
  margin: 4px 0;
  font-size: 8px;
}

.form-group {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

select {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 150px;
  background-color: #95a5a6;
  color: white;
  border: none;
  /* padding: 8px 20px; */
  border-radius: 20px;
  cursor: pointer;
}

.confirm-btn {
  background-color: #3498db;
  width: 200px;
  height: 40px;
  border-radius: 20px;
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}
</style>
